<!-- 设备总称下拉框 -->
<template>
  <px-form-item label="设备总称" prop="categoryId" :rules="{ required: props.isRequired, message: '设备总称不能为空', trigger: ['blur', 'change'] }">
    <px-select-v2
      style="width: 100%"
      v-model="categoryVal"
      placeholder="请选择设备总称"
      clearable
      filterable
      :disabled="props.isDisabled"
      :options="categoryList"
      @focus="focusCategory"
      @change="changeCategory"
    />
  </px-form-item>
</template>

<script setup lang="ts">
import { queryEquipCategorySelect } from "@/api/common";
import { ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changeCategory"]);
const props = defineProps(["className", "systemCodes", "categoryId", "isRequired", "isDisabled"]);

const categoryVal = ref(null);
const categoryList = ref([]);

watch(
  () => props.categoryId,
  val => {
    categoryVal.value = props.categoryId;
    if (val) {
      setTimeout(() => {
        focusCategory();
      }, 0);
    }
  },
  { immediate: true }
);
// 获取设备总称下拉列表
const focusCategory = async () => {
  const tempCategoryList = await queryEquipCategorySelect({
    className: props.className,
    systemCodes: props.systemCodes
  });
  categoryList.value = tempCategoryList?.map(item => ({ label: item.name, value: item.id })) || [];
};
// 改变设备总称值，传值给父级并做改变
const changeCategory = () => {
  emits("changeCategory", categoryVal.value);
};
</script>
<style lang="scss" scoped>
:deep(.px-select-v2) {
  .is-disabled {
    .px-select-v2__placeholder {
      color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
